<template>
  <div class="login">
    <el-header>
      <el-row>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <div class="header-left">
              <a href="javascript:;">
                <img
                  @click="backhome"
                  src="//cimg.zhaopin.cn/img/newIndexImages/logo.png"
                  alt=""
                />
              </a>
            </div>
          </div>
        </el-col>
        <el-col :span="18">
          <div class="grid-content bg-purple-light">
            <div class="header-right">
              <div>
                <a href="javascript:;" @click="backhome">
                  <span class="el-icon-s-home"></span>
                  首页
                </a>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-header>
    <div class="login-form">
      <div>
        <h3>校园招聘</h3>
      </div>
      <el-form
        :model="addForm"
        :rules="addFormRules"
        ref="addFormRef"
        label-width="70px"
      >
        <el-form-item label="账号" prop="userName">
          <el-input
            placeholder="请输入账号"
            v-model="addForm.userName"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            placeholder="请输入密码"
            v-model="addForm.password"
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item>
          <template>
            <el-radio-group v-model="addForm.role" @change="changeuser">
              <el-radio :label="1">管理员</el-radio>
              <el-radio :label="2">用户</el-radio>
              <el-radio :label="3">企业</el-radio>
            </el-radio-group>
          </template>
        </el-form-item>
        <el-row>
          <el-button type="info" class="zhucheone" @click="userregister"
            >用户注册</el-button
          >
          <el-button type="info" class="zhuchetwo" @click="businessregister"
            >企业注册</el-button
          >
        </el-row>
        <el-row>
          <el-button @click="userlogin" type="success" class="denglu"
            >登录</el-button
          >
        </el-row>
        <el-row>
          <el-button type="primary" class="chongzhi" @click="resetLoginForm"
            >重置</el-button
          >
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //表单验证验证规则对象
      addFormRules: {
        //验证用户名是否合法
        userName: [
          { required: true, message: "请输入登录名称", trigger: "blur" },
          {
            min: 2,
            max: 10,
            message: "长度在 2 到 10 个字符",
            trigger: "blur",
          },
        ],
        //验证密码是否合法
        password: [
          { required: true, message: "请输入登录密码", trigger: "blur" },
          {
            min: 6,
            max: 15,
            message: "长度在 6 到 15 个字符",
            trigger: "blur",
          },
        ],
      },
      //登录表单
      addForm: {
        userName: "",
        password: "",
        role: 1,
      },
      user: "",
      person: "",
      business: "",
    };
  },
  methods: {
    changeuser() {
      console.log(this.addForm.role);
    },
    userregister() {
      this.$router.push("/uregister");
    },
    businessregister() {
      this.$router.push("/bregister");
    },
    //点击重置按钮，重置登录表单
    resetLoginForm() {
      this.$refs.addFormRef.resetFields();
    },
    backhome() {
      this.$router.push("/");
    },
    //登录按钮
    userlogin() {
      console.log(this.addForm);
      this.$refs.addFormRef.validate(async (valid) => {
        if (!valid) return;
        const { data: res } = await this.$http.post("/login", this.addForm);
        console.log(this.addForm);
        if (res.code !== 2000) {
          console.log(res);
          return this.$message.error("登录失败!");
        }
        console.log("denglu", res);
        this.$store.commit("setUserdata", res.objData);

        this.$message.success("登录成功!");
        //1.将登录成功之后的 token，保存到客户端的sessionStorage 中
        // 1.1 项目中除了登录之外的其他API接口，必须在登录之后才能访问
        // 1.2 token 只应在当前网站打开期间生效，所以将 token 保存在 sessionStorage 中
        window.sessionStorage.setItem("usermeg", JSON.stringify(res.objData));
        window.sessionStorage.setItem("token", res.objData.token);
        this.$router.push(res.objData.url);
      });
    },
  },
};
</script>

<style lang="less" scoped>
.login {
  background-color: aquamarine;
  height: 753px;
  position: relative;
  .el-header {
    background-color: rgb(154, 207, 191);
    .header-left {
      margin-top: 12px;
    }
    .header-right {
      float: right;
      margin-right: 250px;
      div {
        float: left;
        font-size: 16px;
        height: 60px;
        line-height: 60px;
        margin-right: 40px;
        color: #fff;
        a {
          text-decoration: none;
          color: #fff;
        }
      }
    }
  }
  .login-form {
    width: 400px;
    height: 500px;
    background-color: #eee;
    position: absolute;
    top: 120px;
    left: 560px;
    border-radius: 10px;
    h3 {
      margin-top: 30px;
    }
    .denglu {
      margin: 0 auto;
      width: 300px;
    }
    .chongzhi {
      margin: 20px auto;
      width: 300px;
    }
    .zhucheone {
      float: left;
      margin: 0px 30px 20px 50px;
      width: 100px;
    }
    .zhuchetwo {
      float: right;
      margin: 0px 50px 20px 30px;
      width: 100px;
    }
    .el-radio-group {
      float: left;
      margin-left: 0px;
    }
    .el-form-item {
      padding: 0;
      width: 350px;
      margin: 20px 35px 20px 15px;
      .el-select {
        margin-left: 0px;
      }
    }
  }
}
</style>